import React from 'react';
import { Input, Icon } from 'antd';

const InputSearch = Input.Search;

class QueryExtra extends React.Component {

  state = { searchName: '' }

  componentDidMount() {
    const { getRef } = this.props;
    if (getRef) getRef(this);
  }

  handleReset = () => {
    this.setState({ searchName: '' });
  }

  handleSearch = value => {
    const { onSearch } = this.props;
    if (onSearch instanceof Function) onSearch(value);
  }

  handleValueChange = e => {
    const inputValue = e.target.value;
    const { onChange } = this.props;
    this.setState({ searchName: inputValue.trim() });
    if (onChange instanceof Function) onChange({ searchName: inputValue.trim() });
  }


  render() {
    const { visible, handleFilterVisible } = this.props;
    const { searchName } = this.state;
    return (
      <div>
        <InputSearch
          placeholder="请输入流程名称"
          onSearch={this.handleSearch}
          onChange={this.handleValueChange}
          className='input__search'
          value={searchName}
        />
        <span className={`a__link advanced__filter ${visible && 'advanced__filter__up'}`}>
          <span onClick={handleFilterVisible} style={{ cursor: 'pointer' }}>
            <span>{visible ? '收起' : '高级筛选'}</span>
            {visible ? <Icon type="up" /> : <Icon type="down" />}
          </span>
        </span>
      </div>
    );
  }
}
export default QueryExtra;